<template>
    <div class="bbu-board-status-table-container">
        <el-card shadow="never" class="table-container">
            <template #header>
                <div class="buttons">
                    <div>     
                        此表为 极简整合 <span style="color:red">{{queryParamsModel.period==="before"?'前':'后'}}</span> 板卡现状：       
                        &nbsp;机房占用&nbsp; <span  style="color:red"> {{bbuStatisticsDataRef.roomCount}}  </span> &nbsp;&nbsp 机框/主控/基带/电源 分别为 <span style="color:red">{{bbuStatisticsDataRef.frameCount}} / {{bbuStatisticsDataRef.controlCount}} / {{bbuStatisticsDataRef.baseCount}} / {{bbuStatisticsDataRef.powerCount}} </span>
                        <!-- <br/> -->
                       
                    </div>

                    <div>
                        <el-button
                            v-show="queryParamsModel.period === 'before'"
                            type="danger"
                            :disabled="totalRef === 0"
                            @click="handleDelete(undefined)"
                            ><ElSvgIcon
                                a-icon-name="el-icon-delete"
                                :aSize="15"
                            />&nbsp;删除全部
                        </el-button>
                        &nbsp;

                        <el-dropdown split-button v-show="queryParamsModel.period === 'before'">
                            导入
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="downloadTemplate">
                                        <ElSvgIcon
                                            a-icon-name="el-icon-download"
                                        />下载模板</el-dropdown-item
                                    >
                                    <el-dropdown-item @click="openImportDialog">
                                        <ElSvgIcon
                                            a-icon-name="el-icon-upload"
                                        />导入数据</el-dropdown-item
                                    >
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        &nbsp;
                        <el-dropdown split-button>
                            导出
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="exportAll">
                                        <ElSvgIcon
                                            a-icon-name="el-icon-download"
                                        />导出所有</el-dropdown-item
                                    >
                                    <el-dropdown-item @click="exportQuery">
                                        <ElSvgIcon
                                            a-icon-name="el-icon-bottom"
                                        />导出筛选</el-dropdown-item
                                    >
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
            </template>

            <el-table
                v-loading="loadingRef"
                :data="tableListRef"
                style="width: 100%; "
                @selection-change="handleSelectionChange"
            >
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
               
                <el-table-column
                    prop="city"
                    label="地市"
                    width="90"
                    align="center"
                    fixed
                />
                <el-table-column
                    prop="county"
                    label="区县"
                    width="120"
                    align="center"
                    fixed
                />
                <el-table-column
                    prop="generationType"
                    label="制式"
                    width="100"
                    align="center"
                    
                />
                <!-- <el-table-column
                    prop="biddingRange"
                    label="标段"
                    width="100"
                    align="center"
                    fixed
                /> -->
                <!-- <el-table-column
                    prop="sourceTac"
                    label="原BBU归属TAC"
                    width="100"
                    align="center"
                    fixed
                /> -->
                <el-table-column
                    prop="bbuModel"
                    label="BBU型号"
                    width="120"
                    align="center"
                   
                />
                <el-table-column
                    prop="nodeId"
                    label="gNodeb Id"
                    width="120"
                    align="center"
                    
                />
                <el-table-column
                    prop="nodeName"
                    label="gNodeB Name"
                    width="140"
                    align="center"
                   
                />
                <el-table-column
                    prop="apparatusRoomId"
                    label="机房编号"
                    width="180"
                    align="center"
                    
                />

                <el-table-column
                    prop="vendor"
                    label="厂家"
                    width="100"
                    align="center"
                    
                />
                <el-table-column
                    prop="boardType"
                    label="板卡类型"
                    width="100"
                    align="center"
                   
                />
                <!-- <el-table-column
                    prop="boardSn"
                    label="S/N码"
                    width="180"
                    align="center"
                    fixed
                /> -->
                
                <el-table-column
                    prop="boardModel"
                    label="板卡型号"
                    width="100"
                    align="center"
                    
                />
                <el-table-column
                    prop="slotIndex"
                    label="槽道号"
                    width="100"
                    align="center"
                   
                />
                <!-- <el-table-column
                    prop="totalPort"
                    label="总端口数（资源能力端口）"
                    width="100"
                    align="center"
                    fixed
                />
                <el-table-column
                    prop="usedPort"
                    label="已使用端口"
                    width="180"
                    align="center"
                   
                />
                <el-table-column
                    prop="leftPort"
                    label="剩余可配小区"
                    width="100"
                    align="center"
                   
                /> -->
                <!-- <el-table-column
                    prop="isAvailableFor900M"
                    label="是否具备900M能力开放能力"
                    width="100"
                    align="center"
                    fixed
                />
                <el-table-column
                    prop="availableCellAmountFor10M"
                    label="能力开放后可开通L10M小区数"
                    width="180"
                    align="center"
                    fixed
                /> -->
                <!-- <el-table-column
                    prop="macroOrMicro"
                    label="室分or宏站"
                    width="100"
                    align="center"
                  
                /> -->
                <el-table-column
                    prop="netType"
                    label="现有网络制式"
                    width="100"
                    align="center"
                   
                />
<!--                
                <el-table-column label="操作" fixed="right" width="220">
                <template #default="scope">
                    
                    <el-button
                        v-hasPerm="['sys:user:edit']"
                        type="primary"
                        link
                        size="small"
                        @click="openAddOrEdidDialog(scope.row.id)"
                        ><i-ep-edit />编辑</el-button
                    >
                    <el-button
                        v-hasPerm="['sys:user:delete']"
                        type="primary"
                        link
                        size="small"
                        @click="handleDelete(scope.row.id)"
                        ><i-ep-delete />删除</el-button
                    >
                    </template>
                </el-table-column> -->
               
            </el-table>

            <Pagination
                v-if="totalRef > 0"
                v-model:total="totalRef"
                v-model:currentPage="queryParamsModel.pageNum"
                v-model:pageSzie="queryParamsModel.pageSize"
                @pagination="handleQuery"
            />
            <!-- {{ queryParamsModel }} -->
        </el-card>
    </div>
     <!-- 弹窗 -->
      <ImportDialog ref="importDialogRef"></ImportDialog>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { $bus } from "@/event_bus/event_bus_index";
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import ImportDialog from '@/views/current_status/bbu_board_status/components/bbu_board_status_import_dialog.vue'
import Pagination from "@/components/pagination/pagination_index.vue";
import * as bbuBoardStatusApi from '@/api/current_status/bbu_board_status/bbu_board_status_api_index'
import { NslUtilDownUpLoad } from "@/utils/down_up_load/NslUtilDownUpLoad";
import { EnumHttpMime } from "@/types/global/enums/enums_types";
import { TypeBbuBoardStatusVoI, TypeBbuBoardStatusVoQueryI,TypeBbuStatisticsDataI } from "@/api/current_status/bbu_board_status/bbu_board_status_types";



const queryParamsModel = defineModel<TypeBbuBoardStatusVoQueryI>({
    required: true,
});

const loadingRef = ref(false);
const idsRef = ref<number[]>([]);
const totalRef = ref(0);

const tableListRef = ref<TypeBbuBoardStatusVoI[]>();

const addEditFormDialogRef=ref()
const importDialogRef=ref()

const fullscreenLoadingRef = ref();

const bbuStatisticsInit={
    baseCount:0,
    frameCount:0,
    powerCount:0,
    roomCount:0,
    controlCount:0
}


const bbuStatisticsDataRef=ref<TypeBbuStatisticsDataI>(Object.assign({},bbuStatisticsInit))


const openFullScreenLoading = () => {
    fullscreenLoadingRef.value= ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
//   setTimeout(() => {
//     loading.close()
//   }, 2000)
}

const closeFullScreenLoading=()=>{
    fullscreenLoadingRef.value.close();
}


function calBbuReturnResult(){
    openFullScreenLoading();
    bbuBoardStatusApi.downloadCalBbuReturnReslut().then((response: any) => {
        const fileData = response.data
        const fileName = decodeURIComponent(
            response.headers['content-disposition'].split(';')[1].split('=')[1],
        )
        // const fileType =
        //     'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8';
        NslUtilDownUpLoad.downloadFile(fileData, EnumHttpMime.ZIP_ZIP, fileName);
        closeFullScreenLoading();
    })
}



async function  handleQuery() {
    loadingRef.value = true;
    
    let queryParamFix: TypeBbuBoardStatusVoQueryI;
    bbuBoardStatusApi
        .getBbuboardStatusTablePage(queryParamsModel.value)
        .then(({ data }) => {
            tableListRef.value = data.list;
            totalRef.value = data.total;
        })
        .finally(() => {
            loadingRef.value = false;
        });

    const response=await bbuBoardStatusApi.calBbuCount(queryParamsModel.value.period)
    bbuStatisticsDataRef.value=response.data;
    
}

$bus.on("bbu-return-board-table-query", () => {
    handleQuery();
});

// $bus.on("current-status-apparatus-room-table-reset-and-query", () => {
//     queryParamsModel.value.pageNum = 1;
//     queryParamsModel.value.cityNameIdList = [];
//     queryParamsModel.value.keyWord=undefined;
//     handleQuery();
// });

function openAddOrEdidDialog(id?: number) {
    addEditFormDialogRef.value.openDialog(id);
}

const removeIdsRef=ref([]);

/** 行选中 */
function handleSelectionChange(selection: any) {
    removeIdsRef.value = selection.map((item: any) => item.id)
}


function handleDelete(id?:number) {
    let idArray:number[]=[];
   
    ElMessageBox.confirm('确认删除全部记录?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        bbuBoardStatusApi.deleteAll(queryParamsModel.value.period)
            .then(() => {
                ElMessage.success('删除成功')
                //如果在第一页，保持不变
                //如果不在第一页
                //a. 删除数量如果等于pageData.length，则pageNum-1
                //b. 如果删除数量<pageData.length，则pageNum不变
                if (queryParamsModel.value && queryParamsModel.value.pageNum && queryParamsModel.value.pageNum > 1) {
                    if (idArray.length === tableListRef.value!.length) {
                        queryParamsModel.value.pageNum--
                    }
                }
                handleQuery();
                bbuStatisticsDataRef.value=bbuStatisticsInit;
            })
            .catch(() => {
                ElMessage.error('删除失败')
            })
    })
}


onMounted(() => {
    handleQuery();
});

//#region download and upload
/** 下载导入模板 */
function downloadTemplate() {
    bbuBoardStatusApi.downloadTemplate().then((response: any) => {
        const fileData = response.data
        const fileName = decodeURIComponent(
            response.headers['content-disposition'].split(';')[1].split('=')[1],
        )
        // const fileType =
        //     'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8';
        NslUtilDownUpLoad.downloadFile(fileData, EnumHttpMime.OFFICE_XLSX, fileName);
    })
}

/** 导出查询 */
function exportQuery() {
    bbuBoardStatusApi.exportQuery(queryParamsModel.value).then((response: any) => {
        const fileData = response.data
        const fileName = decodeURIComponent(
            response.headers['content-disposition'].split(';')[1].split('=')[1],
        )
        // const fileType =
        //     'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8';
        NslUtilDownUpLoad.downloadFile(fileData, EnumHttpMime.OFFICE_XLSX, fileName);
    })
}
/**
 * 导出所有数据
 */
 async function exportAll(){
    const response = await bbuBoardStatusApi.exportAll(queryParamsModel.value.period)
    const fileData = response.data
    const fileName = decodeURIComponent(
        response.headers['content-disposition'].split(';')[1].split('=')[1],
    )
    // const fileType =
    //     'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8';
    NslUtilDownUpLoad.downloadFile(fileData, EnumHttpMime.OFFICE_XLSX, fileName);
}
//#endregion


const openImportDialog=()=>{
    importDialogRef.value.openDialog();
}

</script>
<style lang="scss" scoped>
.buttons{
    display:flex;
    justify-content:space-between;
}
</style>
